<template>
    <div id="userRecharge" class="same-change-oldstyle">
        <div class="same-head-box">
            <div class="saem-seat-box">
                <div class="saem-seat-left">
                    <span>当前位置：</span>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
                        <el-breadcrumb-item>普通水卡</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/virtualCardList' }">水卡列表</el-breadcrumb-item>
                        <el-breadcrumb-item>平账记录</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="saem-seat-right">
                    <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                    <button class="same-search-btns" @click="returnBack">返回</button>
                </div>
            </div>
            <div class="same-search-box">
                <div>
                    <div class="same-search-left">
                        <div class="same-left-one">
                            <span class="same-search-span same-search-fisrt">平账时间:</span>
                            <el-date-picker style="width:140px" v-model="date1" type="date" size="medium"
                                value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>
                            <div class="same-interval">至</div>
                            <el-date-picker style="width:140px" v-model="date2" type="date" size="medium"
                                value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
                        </div>
                        <div class="same-left-one">
                            <el-button type="primary" size="medium" @click="findJfList()">搜索</el-button>
                            <el-button type="info" size="medium" @click="reset()">重置</el-button>
                        </div>
                    </div>
                    <div class="same-search-right"></div>
                </div>
            </div>
        </div>
        <div class="same-table-box">
            <div class="table_box">


                <div class="common-table-outer">
                    <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
                        :data="tableData" stripe>
                        <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*row}}
							</template>
						</el-table-column>
                        <el-table-column align="center" prop="c_id" width="120" label="ID">
                        </el-table-column>
                        <el-table-column align="center" prop="card_number" label="水卡卡号">
                        </el-table-column>
                        <el-table-column align="center" prop="mainboard_type_name" label="平账前线上余额">
                            <template slot-scope="scope">
                                {{scope.row.pz_front_online_balance|filterNumber}}元
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="ctime" label="平账前卡上余额">
                            <template slot-scope="scope">
                                {{scope.row.pz_front_card_balance|filterNumber}}元
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="address" label="平账后余额">
                            <template slot-scope="scope">
                                {{scope.row.pz_after_balance|filterNumber}}元
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="add_time" label="平账时间">
                        </el-table-column>
                        <template slot="empty" v-if="isLoad">
                            <div class="new-no-data-show">
                                <img src="../../assets/images/no-data.png" alt="">
                                <div>暂无相关数据</div>
                            </div>
                        </template>
                    </el-table>

                    <div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="pageNo" :page-sizes="sizes" :page-size="row"
                            layout="total,prev, pager, next, jumper, sizes" :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'cardCapital',
        data: function () {
            return {
                date1: '',
                date2: '',
                loading: false,
                isLoad: false,//是否请求
                pageNo: 1,
                row: 15,
                sizes: [15, 30, 40, 50],
                total: 0,
                currentPage: 1,
                start_time: '',
                end_time: '',
                tableData: [], // 返回的结果集合
                time: '', // 结束时间
                cardNum: '',//水卡卡号
                water_id: 0
            }
        },
        computed: {},
        // 初始化执行
        created: function () {
            this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
            var that = this;
            that.water_id = that.$route.query.water_id;
            that.cardCapitalList();  // 获取平账记录列表
        },
        inject: ['reload'],
        methods: {
            RefreshFun() {
                // 调用reload方法，刷新整个页面
                this.reload()
            },
            //返回
            returnBack() {
                this.$router.back(-1);
            },
            reset() {
                this.date1 = '';
                this.date2 = '';
                this.pageNo = 1;
                this.cardCapitalList();
            },
            //搜索
            findJfList() {
                this.pageNo = 1;
                this.cardCapitalList();
            },
            //每页
            handleSizeChange(val) {

                this.row = val;
                this.pageNo = 1;
                this.cardCapitalList();
            },
            //分页
            handleCurrentChange(val) {
                this.pageNo = val;
                this.cardCapitalList();
            },
            // 获取积分管理页面数据
            cardCapitalList: function () {
                var that = this;
                that.loading = true; //打开loading动画
                that.isLoad = false;
                // ajax请求
                that.$post({
                    url: 'Partner/WaterCard/getCardCapital',
                    data: {
                        page: that.pageNo,
                        row: that.row,
                        start_time: that.date1 ? that.date1 : '',
                        end_time: that.date2 ? that.date2 : '',
                        water_id: that.water_id
                    },
                    success: (data) => {
                        that.loading = false; //打开loading动画
                        that.isLoad = true;
                        that.tableData = []; // 清空数据
                        if (data.code == 1000) {
                            that.tableData = data.data.data;
                            that.total = Number(data.data.page.total_number);
                            that.currentPage = data.data.page.current_page;
                            that.census = data.data.census;//合计
                        }
                    }
                })
            }

        },
        mounted() {
        }
    }

</script>
<style>
    #userRecharge {
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }
</style>